<template>
  <div class="homestay">
    <!-- <img src="../../../../server_Homestay/uploads/file-1682658964285.jpg" alt=""> -->
    <div class="heald-container">
      <div class="block"></div>
      <!-- 搜索 -->
      <div class="search">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="searchText"
              clearable
              @clear="onSearch(allForm,searchText)"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSearch(allForm,searchText)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 新增 -->
      <div class="add_item">
        <el-button type="primary" @click="centerDialogVisible = true">添加民宿</el-button>
        <!-- 新增弹框 -->
        <el-dialog
          title="新增民宿信息"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
        >
          <!-- 上传图片 -->
          <div class="uplode_url">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8000/uploadImage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false" limit="1">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>

                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog> -->
          </div>
          <!-- 新增信息 -->
          <el-form :model="addForm">
            <el-form-item label="民宿标题" :label-width="formLabelWidth">
              <el-input v-model="addForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="民宿价格" :label-width="formLabelWidth">
              <el-input v-model="addForm.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="民宿简介" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                v-model="addForm.des"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addItem">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="content_box">
      <div class="container">
        <el-empty
          v-if="this.form.length == 0"
          class="empty_box"
          description="没有民宿信息"
        ></el-empty>
        <div v-else class="contner_list" v-for="(item, id) in form" :key="id">
          <el-form ref="form" :model="item">
            <el-form-item>
              <img :src="item.img" alt="" class="img_mian" />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="item.title"
                :disabled="item.disabled == 0 ? true : false"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="item.price"
                :disabled="item.disabled == 0 ? true : false"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                type="textarea"
                v-model="item.des"
                :disabled="item.disabled == 0 ? true : false"
                :rows="5"
                resize="none"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="margin-left:50px" @click="onSubmit(item)">编辑</el-button>
              <el-button type="success" @click="onSure(item)">确定</el-button>
              <!-- <el-button type="primary" @click="onDelete(index)">删除</el-button> -->
              <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="confirm(item)"
                @cancel="cancel"
              >
                <el-button type="danger" class="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryHomestay,
  addHomestay,
  deleteHomestay,
  modifyHomestay,
} from "../../http/axios";
export default {
  data() {
    return {
      // srcc:"",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      imageUrl: "",
      //是否弹框
      centerDialogVisible: false,
      visibleSure: false,
      queryInfo: {
        qurey: "",
      },
      searchText: "",
      formInline: {
        user: "",
      },
      formLabelWidth: "100px",
      addForm: {
        title: "",
        price: "",
        des: "",
        srcc: "",
      },
      allForm:[],
      form: [],
    };
  },
  // watch: {
  //   search(val) {
  //     if (!val) {
  //       this.form = this.form
  //     }
  //   },
  // },
  mounted() {
    // 刷新查询
    queryHomestay().then((res) => {
      let allForm = [];
      res.obj.data.map((item) => {
        allForm.push(Object.assign({}, item, { disabled: 0 }));
      });
      //搜索条件
      if (!this.searchText) {
        this.form = allForm;
        this.allForm = allForm
      } else {
        this.form = this.onSearch(allForm, this.searchText);
      }
    });
  },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },

      // 上传图片
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // console.log('/server_Homestay/uploads/' + file.response.obj.data.data.path.slice(8))
        this.addForm.srcc = this.imageUrl;
        // this.addForm.srcc = '../../../../server_Homestay/uploads/' + file.response.obj.data.data.path.slice(8);

        // console.log(this.imageUrl, "-----");
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      //确定删除
      confirm(item) {
        console.log("确定");
        deleteHomestay({ id: item.id }).then((res) => {
          console.log(res);
          // res.obj.data.map((item) => {
          //   this.form.push(Object.assign({}, item,{ disabled: 0 }));
          // });
          this.$router.go(0);
        });
      },
      cancel() {
        console.log("取消");
      },
      // 搜索
      onSearch(allForm, searchText) {
        console.log("搜索");
        if (searchText !== "") {
          var reg = new RegExp(searchText);

          var arr = [];

          for (var i = 0; i < allForm.length; i++) {
            if (reg.test(allForm[i].title)) {
              //这里匹配的是数组中需要的的内容，可根据业务需求自行修改！

              arr.push(allForm[i]);
            }
          }

          this.form = arr; //返回符合条件的数组
        } else {
          this.form = allForm;
        }
      },
      //修改
      onSubmit(item) {
        // console.log(item.id);
        item.disabled = 1;
        // console.log("submit!");
      },
      // 修改确定
      onSure(item) {
        var body = {
          id: item.id,
          title: item.title,
          price: item.price,
          des: item.des,
        };

        modifyHomestay(body).then((res) => {
          console.log(res);
        });
        item.disabled = 0;
      },
      // 添加民宿
      addItem() {
        this.centerDialogVisible = false;
        let body = {
          title: this.addForm.title,
          price: this.addForm.price,
          des: this.addForm.des,
          img: this.addForm.srcc,
        };
        //新增接口
        addHomestay(body).then((res) => {
          console.log(res);
          this.$router.go(0);
        });
      },
    },
};
</script>

<style scoped>
.content_box {
  display: flex;
  justify-content: center;
}
.empty_box {
  width: 100%;
  margin: auto;
}
.heald-container {
  display: flex;
  justify-content: space-between;
  padding: 0 200px;
}
.search {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.add_item {
  margin-top: 20px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
}
.contner_list {
  width: 300px;
  border-radius: 10px;
  /* display: inline-block; */
  margin: 0 calc((1400px - 1200px) / 8);
}
.img_mian {
  width: 100%;
  height: 300px;
  border-radius: 20px;
}

.uplode_url {
  display: flex;
  justify-content: center;
}
</style>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.danger{
  margin-left:10px ;
}
</style>
